<template>
  <view class="login">
    <view class="login-t">
      <view class="login-title">
        旅搭
      </view>
      <image class="login-logo" :src="logoImage" mode="aspectFill"></image>
    </view>
    <view class="login-m">
      <view class="login-item">
        <input 
          v-model="mobile" 
          type="number" 
          :maxlength="11" 
          placeholder="请输入手机号码" 
          focus 
          placeholder-style="color:#fff"
        />
      </view>
      <view class="login-item">
        <input 
          v-model="password"  
          type="password" 
          placeholder="请输入密码" 
          placeholder-style="color:#fff"
        />
      </view>
    </view>
    <view class="login-b">
      <button @click="goLogin()">登录</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      logoImage: '/static/images/login_jian.png',
      mobile: '',
      password: ''
    };
  },
  computed: {},
  onLoad(option) {},
  methods: {
    goLogin() {}
  }
};
</script>

<style lang="scss" scoped>

.phcolor {
  color: #fff;
}
.login {
  height: 100vh;
  background-color: #fff;

  padding: 0upx 100upx;
  @include bgCenter($bgtop);
  .login-t {
    text-align: center;
    padding: 250upx 50upx 50upx 50upx;
    .login-title {
      margin-bottom: 30upx;
      font-size: 40upx;
      color: #fff;
    }
  }
  .login-logo {
    width: 180upx;
    height: 180upx;
    border-radius: 20upx;
    background-color: #f8f8f8;
  }
  .login-m {
    margin-bottom: 100upx;
    .login-item {
      border-bottom: 2upx solid #fff;
      overflow: hidden;
      padding: 10upx;
      color: #fff;
      margin-bottom: 30upx; 
     
    }
  }

  .login-other {
    margin-bottom: 40upx;
    .item {
      padding: 20upx 0;
    }
  }
}
</style>